<template>
	<view class="charts-box">
		<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
import { getUpCnt } from '@/api/mappages/lakes/lakes.js';
export default {
	data() {
		return {
			moonData: [],
			chartData: {},
			opts: {
				color: ['#2e87ff'],
				padding: [15, 15, 0, 5],
				enableScroll: false,
				legend: {
					show: false
				},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					data: []
				},
				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
						linearType: 'custom',
						seriesGap: 5,
						linearOpacity: 0.5,
						barBorderCircle: true,
						customColor: ['#699efa', '#2e87ff']
					}
				}
			}
		};
	},
	mounted() {
		console.log(this.chartData, 'this.chartData');
		this.getServerData();
	},
	onReady() {
		this.getServerData();
	},
	methods: {
		async getServerData() {
			let arr = await getUpCnt();
			this.moonData = arr.result || [];
			this.opts.yAxis.data.push({
				min: 0,
				max: Math.floor(Math.max(...this.moonData.map((r) => r?.total)) + 50 / 10) * 1.25
			});
			console.log();
			let res = {
				categories: this.moonData.map((r) => r?.date),
				series: [
					{
						name: '目标值',
						data: this.moonData.map((r) => r?.total)
					}
				]
			};
			this.chartData = JSON.parse(JSON.stringify(res));
		}
	}
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
	width: 100%;
	height: 300px;
}
</style>
